<!-- 项目进度 -->
<template>
  <div class="content">
    <el-card class="box-card">
      <div slot="header">
        <span style="color: rgb(14, 175, 14);">项目进度</span>
      </div>
      <div id="projectChart" style="width: 100%;height:470px"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {

    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    initChart() {
      const ctx = document.getElementById('projectChart')
      const chart = echarts.init(ctx)
      let option = {
        dataset: {
            source: [
              ["风光一体化防沙治沙", 50],
              ["三北六期", 10],
              ["蚂蚁森林", 100],
              ["蓝旗机器人造林", 60],

            ],
        },
        backgroundColor: "#fff",
        tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
        },
        title: {
            // text: "渐变柱状图",
            top: 0,
            right: "4%",
            textStyle: {
              fontWeight: "bold",
              fontSize: 14,
              color: "#666666",
            },
        },
        grid: {
            left: "8%",
            right: "4%",
            bottom: "10%",
            top: "10%",
        },
        xAxis: {
            type: "category",
            axisLine: {
              lineStyle: {
                  color: "#dddddd",
              },
            },
            axisTick: {
              show: false,
              alignWithLabel: true,
              lineStyle: {
                  color: "#f3f3f3",
              },
            },
            axisLabel: {
              fontSize: 14,
              textStyle: {
                  color: "#666666",
                  fontFamily: "Microsoft YaHei",
              },
            },
        },

        yAxis: {
            type: "value",
            min: 0,
            // max: yMax,
            axisLine: {
              show: false,
              lineStyle: {
                  color: "#dddddd",
              },
            },
            // data: [1, 2, 3],
            axisTick: {
              show: true,
              alignWithLabel: true,
              lineStyle: {
                  color: "#dddddd",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                  type: "dotted",
                  color: "#dddddd",
                  type: [6, 3],
                  dashOffset: 2,
              },
            },
            axisLabel: {
              padding: [0, 5, 0, 0],
              fontSize: 14,
              textStyle: {
                  color: "#666666",
                  fontFamily: "Microsoft YaHei",
              },
            },
        },
        series: [
            {
              type: "bar",
              barWidth: 30,
              itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#00e7e0",
                        },
                        {
                          offset: 1,
                          color: "#00d0c2",
                        },
                    ]),
                    barBorderRadius: [4, 4, 0, 0],
                  },
              },
            },
        ],
      };
      chart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
